<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>用户管理</title>
    <meta name="decorator" content="default"/>

    <%@include file="/WEB-INF/views/include/treeview.jsp" %>

    <style type="text/css">
        .ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}

        #right {
            /*width: 1050px !important;*/
        }
    </style>

    <script type="text/javascript">
        function refresh() {//刷新

            window.location = "${ctx}/sys/user/index";
        }

        $(document).ready(function () {
            $("body").addClass("gray-bg");
        });
    </script>
</head>
<body>
<sys:message content="${message}"/>

<div class="wrapper wrapper-content">
    <ul class="nav nav-tabs">
        <li><a href="${ctx}/employee/viEmployee">员工信息维护</a></li>
        <li><a href="${ctx}/employee/viEmployee/supers">员工上级管理</a></li>
        <li class="active"><a href="${ctx}/sys/user/index">用户管理</a></li>
    </ul>

    <div id="content" class="row">
        <div id="left" class="col-sm-2" style="padding-right: 0px; width: 240px; height: 610px;">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>组织机构 </h5>
                    <a onclick="refresh()" class="pull-right"><i class="fa fa-refresh"></i></a>
                </div>
                <div class="ibox-content">
                    <div id="ztree" class="ztree"></div>
                </div>
            </div>
        </div>
        <div id="right" class="col-sm-10 animated fadeInRight" style="padding-left: 0px; padding-right: 0px; margin-top: -20px; height: 750px; width: 992px !important;">
            <iframe id="officeContent" scrolling="no" name="officeContent" src="${ctx}/sys/user/list" width="100%" height="91%" frameborder="0" style="height: 750px;"></iframe>
        </div>

        <%--<div id="right" class="col-sm-9 animated fadeInRight" style="padding-left: 0px; padding-right: 0px; margin-top: -20px; height: 610px; width: 992px;">--%>
            <%--<iframe id="officeContent" src="${ctx}/sys/user/list"  width="100%" height="91%" frameborder="0" style="height: 610px;"></iframe>--%>
        <%--</div>--%>
    </div>
</div>


<%--<div id="content" class="row-fluid">--%>

<%--<div id="openClose" class="close">&nbsp;</div>--%>
<%--<div id="right">--%>
<%--<iframe id="officeContent" src="${ctx}/sys/user/list" width="100%" height="91%" frameborder="0"></iframe>--%>
<%--</div>--%>
<%--</div>--%>
<script type="text/javascript">
    var setting = {
        data: {simpleData: {enable: true, idKey: "id", pIdKey: "pId", rootPId: '0'}},
        callback: {
            onClick: function (event, treeId, treeNode) {
                var id = treeNode.id == '0' ? '' : treeNode.id;
                console.log(treeNode);
                if (treeNode.type == '1') {
                    $('#officeContent').attr("src", "${ctx}/sys/user/list?company.id=" + id + "&company.name=" + treeNode.name);
                } else {
                    $('#officeContent').attr("src", "${ctx}/sys/user/list?office.id=" + id + "&office.name=" + treeNode.name);
                }

            }
        }
    };

    function refreshTree() {
        $.getJSON("${ctx}/sys/office/treeData?grade=2", function (data) {
            console.log(data);
            $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
        });
    }

    refreshTree();

    var leftWidth = 240; // 左侧窗口大小
    var htmlObj = $("html"), mainObj = $("#main");
    var frameObj = $("#left, #openClose, #right, #right iframe");

    function wSize() {
        var strs = getWindowSize().toString().split(",");
        htmlObj.css({"overflow-x": "hidden", "overflow-y": "hidden"});
        mainObj.css("width", "auto");
        frameObj.height(strs[0] - 5);
        var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
        $("#right").width($("#content").width() - leftWidth - $("#openClose").width() - 50);
        $(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
    }

</script>
<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>